<template>
  <div class="inhand">
    <el-row style="padding: 0.2rem 0.2rem" :gutter="10">
      <el-col :span="3">
        <el-date-picker
          style="width: 100%"
          v-model="time"
          @change="chooseTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="4">
        <el-select
          style="width: 100%"
          clearable
          v-model="siteNameStr"
          @change="
            pageNum = 0;
            currentPage = 1;
            getPage();
          "
          placeholder="请选择监测站"
        >
          <el-option
            v-for="item in siteNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          style="width: 100%"
          clearable
          v-model="keyword"
          @change="
            pageNum = 0;
            currentPage = 1;
            getPage();
          "
          placeholder="请选择物种名称"
        >
          <el-option
            v-for="item in zhongList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="13" style="text-align: right">
        <el-button
          style="background-color: #00cc46; color: #ffffff; position: relative"
        >
          <a
            href="/static/疫源疫病导入模板.xls"
            style="
              display: inline-block;
              width: 100%;
              height: 100%;
              cursor: pointer;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              opacity: 0;
            "
          ></a>
          模板下载
        </el-button>

        <el-button
          style="background-color: #00cc46; color: #ffffff; position: relative"
        >
          <input
            @change="uploadxls($event)"
            style="
              width: 100%;
              height: 100%;
              cursor: pointer;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              opacity: 0;
            "
            type="file"
            accept="application/vnd.ms-excel"
          />
          导入数据
        </el-button>
        <el-button
          style="background-color: #00cc46; color: #ffffff; position: relative"
        >
          <a
            :href="
              '/api/animalDisease/exportFile?areaId=' +
              areaId +
              '&keyword=' +
              keyword +
              '&timeStr=' +
              timeStr +
              '&siteNameStr=' +
              siteNameStr
            "
            style="
              display: inline-block;
              width: 100%;
              height: 100%;
              cursor: pointer;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              opacity: 0;
            "
          ></a>
          导出历史
        </el-button>
      </el-col>
    </el-row>

    <table>
      <thead>
        <th class="wzd">监测站名称</th>
        <th>采集时间</th>
        <th>栖息地</th>
        <th>物种名称</th>
        <th>健康数量</th>
        <th>异常数量</th>
        <th>死亡数量</th>
        <th>物种图片</th>
        <th>经纬度</th>
        <th>操作</th>
      </thead>

      <tbody>
        <tr v-for="(item, index) in pageList" :key="index">
          <td :title="item.siteName">{{ item.siteName }}</td>
          <td>{{ item.insertTime | cDate }}</td>
          <td>{{ item.habitat }}</td>
          <td>{{ item.specieName }}</td>
          <td>{{ item.healthNumber }}</td>
          <td>{{ item.abnormalNumber }}</td>
          <td>{{ item.deathNumber }}</td>
          <td
            style="
              height: 0.5rem;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <el-image
              v-if="item.mediaList.length > 0"
              style="width: 0.5rem; height: 0.3rem"
              :src="glimg(item.mediaList)"
              :preview-src-list="dglimg(item.mediaList)"
            >
            </el-image>
          </td>

          <td
            class="wzd czs"
            @click="showMap(item)"
            :title="item.lon + '-' + item.lat"
          >
            {{ item.lon.toFixed(2) }}，{{ item.lat.toFixed(2) }}
          </td>
          <td>
            <span class="czs" @click="xiugai(item)">修改</span>
            <span class="czs" @click="delet(item)" style="color: red"
              >删除</span
            >
          </td>
        </tr>
      </tbody>
    </table>

    <!--分页 B-->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="totalElements"
      >
      </el-pagination>
    </div>
    <!--分页 E-->

    <!--编辑 B-->
    <div class="formBox" v-if="showform">
      <div class="xqtitle">
        <div style="font-size: 0.16rem; font-weight: 700">
          <span>修改监测数据</span>
        </div>

        <el-button
          size="small"
          @click="resetForm('ruleForm'), (showform = false)"
          style="background: #01c144; color: white"
        >
          返回
        </el-button>
      </div>

      <!--版心 B-->
      <div class="banxin" style="margin-top: 1.1rem">
        <el-form
          :model="ruleForm"
          label-position="left"
          label-width="100px"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item label="监测站名称" prop="siteName">
            <el-select
              v-model="ruleForm.siteName"
              style="width: 100%"
              placeholder="请选择监测站名称"
            >
              <el-option
                v-for="item in siteNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="采集时间" required>
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="采集时间"
                v-model="ruleForm.insertTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>

          <el-form-item label="栖息地" prop="siteName">
            <el-input v-model="ruleForm.habitat"></el-input>
          </el-form-item>

          <el-form-item label="物种名称" prop="siteName">
            <el-input v-model="ruleForm.specieName"></el-input>
          </el-form-item>

          <el-form-item label="健康数量" prop="healthNumber">
            <el-input
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              v-model="ruleForm.healthNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label="异常数量" prop="abnormalNumber">
            <el-input
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              v-model="ruleForm.abnormalNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label="死亡数量" prop="deathNumber">
            <el-input
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              v-model="ruleForm.deathNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label="经纬度" prop="deathNumber">
            <el-input v-model="ruleForm.lonlat"></el-input>
          </el-form-item>

          <el-form-item style="text-align: center">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确认修改</el-button
            >
            <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
          </el-form-item>
        </el-form>
      </div>
      <!--版心 E-->
    </div>
    <!--编辑 E-->

    <!--地图弹窗-->
    <div class="mapboxabBox" v-if="isMap">
      <div
        style="
          position: absolute;
          top: 0.2rem;
          right: 0.2rem;
          z-index: 9999999;
          cursor: pointer;
        "
      >
        <img
          @click="isMap = false"
          src="/static/images/icon/close.png"
          alt=""
        />
      </div>

      <Map ref="Mapc"></Map>
    </div>
    <!--地图弹窗-->
  </div>
</template>

<script>
import http from "../utils/http";
import api from "../utils/api";

import Map from "./Map";

export default {
  name: "disease",
  components: { Map },
  data() {
    return {
      showform: false,
      isMap: false,
      time: "",
      timeStr: "",
      siteNameList: [],
      siteNameStr: "",
      keyword: "",
      zhongList: [],
      currentPage: 1,
      totalElements: 0,
      pageNum: 0,
      areaId: "",
      pageList: [],
      ruleForm: {
        id: "",
        areaId: "",
        insertTime: "",
        siteName: "",
        habitat: "",
        specieName: "",
        healthNumber: "",
        abnormalNumber: "",
        deathNumber: "",
        lonlat: "",
      },
      rules: {
        siteName: [
          { required: true, message: "请选择监测站名称", trigger: "change" },
        ],
        insertTime: [
          {
            type: "date",
            required: true,
            message: "请选择采集时间",
            trigger: "change",
          },
        ],
        habitat: [{ required: true, message: "请输入栖息地", trigger: "blur" }],
        specieName: [
          { required: true, message: "请输入物种名称", trigger: "blur" },
        ],
        healthNumber: [
          { required: true, message: "请输入健康数量", trigger: "blur" },
        ],
        abnormalNumber: [
          { required: true, message: "请输入异常数量", trigger: "blur" },
        ],
        deathNumber: [
          { required: true, message: "请输入死亡数量", trigger: "blur" },
        ],
        lonlat: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
      },
      userId: "",
    };
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.userId = window.sessionStorage.getItem("userId");
    this.getPage();
    this.getsiteNameList();
    this.getzhongList();
  },
  mounted() {},
  methods: {
    glimg(img) {
      return img[0].path + "?x-amz-process=image/resize,h_50,m_lfit";
    },
    dglimg(data) {
      let arr = [];
      data.forEach((e) => {
        arr.push(e.path + "?x-amz-process=image/resize,h_700,m_lfit");
      });
      return arr;
    },
    uploadxls(event) {
      let file = event.target.files[0],
        _that = this;
      let formData = new FormData();
      formData.append("loginId", _that.userId);
      formData.append("file", file);

      (async function f() {
        let res = await http.post(api.addByFile, formData);
        if (res.data.code == "200") {
          _that.$message({
            message: "上传成功",
            type: "success",
          });
          _that.getPage();
        } else {
          _that.$message({
            message: res.data.message,
            type: "warning",
          });
        }
      })();
    },
    delet(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let _that = this;
          (async function f() {
            let res = await http.delete(api.anidelete + "?id=" + data.id);
            if (res.data.code == "200") {
              _that.$message({
                type: "warning",
                message: "删除成功!",
              });
              _that.getPage();
            } else {
              _that.$message({
                type: "warning",
                message: "删除失败!",
              });
            }
          })();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    xiugai(data) {
      let obj = Object.assign({}, data);
      this.ruleForm.id = data.id;
      this.ruleForm.areaId = this.areaId;
      this.ruleForm.insertTime = new Date(obj.insertTime);
      this.ruleForm.siteName = obj.siteName;
      this.ruleForm.habitat = obj.habitat;
      this.ruleForm.specieName = obj.specieName;
      this.ruleForm.healthNumber = obj.healthNumber;
      this.ruleForm.abnormalNumber = obj.abnormalNumber;
      this.ruleForm.deathNumber = obj.deathNumber;
      this.ruleForm.lonlat = obj.lon + "," + obj.lat;
      this.showform = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _that = this,
            obj = Object.assign({}, _that.ruleForm),
            z = {};
          z["id"] = obj.id;
          z["areaId"] = obj.areaId;
          z["insertTime"] = Date.parse(obj.insertTime);
          z["siteName"] = obj.siteName;
          z["habitat"] = obj.habitat;
          z["specieName"] = obj.specieName;
          z["healthNumber"] = obj.healthNumber;
          z["abnormalNumber"] = obj.abnormalNumber;
          z["deathNumber"] = obj.deathNumber;
          z["lon"] = obj.lonlat.split(",")[0];
          z["lat"] = obj.lonlat.split(",")[1];
          (async function f() {
            let res = await http.post(api.update, z);
            if (res.data.code == "200") {
              _that.$message({
                message: "修改成功",
                type: "success",
              });
              _that.showform = false;
              _that.getPage();
            } else {
              _that.$message({
                message: res.data.message,
                type: "warning",
              });
            }
          })();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    showMap(data) {
      this.isMap = true;
      let _that = this;
      setTimeout(function () {
        _that.$refs.Mapc.creationMap();
      }, 300);

      setTimeout(function () {
        let arr = [
          {
            id: data.id,
            name: data.specieName,
            borderColor: "#ffffff",
            fillColor: "#ed2f02",
            textColor: "#ffffff",
            size: 1,
            geojson: { coordinates: [data.lon, data.lat], type: "Point" },
          },
        ];
        _that.$refs.Mapc.previewshape(arr, "showMap");
      }, 500);
    },
    getsiteNameList() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.siteNameList, {
          areaId: _that.areaId,
        });
        if (res.data.code == "200") {
          let arr = [];
          res.data.data.forEach((e) => {
            let z = {
              value: e,
              label: e,
            };
            arr.push(z);
          });

          _that.siteNameList = arr;
        }
      })();
    },
    getzhongList() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.zhongList, {
          areaId: _that.areaId,
          zhong: "",
        });
        if (res.data.code == "200") {
          let arr = [];
          res.data.data.forEach((e) => {
            let z = {
              value: e,
              label: e,
            };
            arr.push(z);
          });

          _that.zhongList = arr;
        }
      })();
    },
    getPage() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.ypage, {
          areaId: _that.areaId,
          keyword: _that.keyword,
          timeStr: _that.timeStr,
          siteNameStr: _that.siteNameStr,
          pageNum: _that.pageNum,
          pageSize: 12,
        });
        if (res.data.code == "200") {
          _that.pageList = res.data.data.content;
          _that.totalElements = res.data.data.totalElements;
        }
      })();
    },
    chooseTime(data) {
      if (data != null) {
        let year = data.getFullYear();
        let month =
          data.getMonth() + 1 > 10
            ? data.getMonth() + 1
            : "0" + (data.getMonth() + 1);
        let day = data.getDate() > 10 ? data.getDate() : "0" + data.getDate();
        this.timeStr =
          year + "-" + month + "-" + day + "~" + year + "-" + month + "-" + day;
      } else {
        this.timeStr = "";
      }
      this.pageNum = 0;
      this.currentPage = 1;
      this.getPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val - 1;
      this.getPage();
    },
  },
};
</script>

<style scoped>
@import "../../static/css/inhand.css";
</style>
